import {Button, Image, Text, View, Radio} from '@tarojs/components';
import Taro from '@tarojs/taro';
import React, {Component} from 'react';
import * as T from '../types';
import './other-login.less';
import actions from '../actions/index';
import {connect} from 'react-redux';
import {store2Props} from '../selectors';
import wecatIcon from '@/assets/image/my/logo.png';
import {_} from 'wmkit';
import {AtActionSheet, AtActionSheetItem} from 'taro-ui';

declare let wx: any;

type IOtherLoginProps = T.IProps & T.IOtherLoginProps;
//@ts-ignore
@connect<Partial<IOtherLoginProps>, T.IOtherLoginState>(store2Props, actions)
export default class OtherLogin extends Component<Partial<IOtherLoginProps>, T.IOtherLoginState> {
  constructor(props) {
    super(props);
    this.state = {
      privacy: false,
      isOpened: false,
    };
  }

  render() {
    let {privacy, isOpened} = this.state;
    let info = `
为了分辨用户，开发者将在获取你的明示同意后，收集你的微信昵称、头像

为了显示距离，开发者将在获取你的明示同意后，收集你的位置信息。 开发者收集你的地址，用于获取位置信息。

开发者收集你的发票信息，用于维护消费功能。

为了用户互动，开发者将在获取你的明示同意后，收集你的微信运动步数。

为了通过语音与其他用户交流互动，开发者将在获取你的明示同意后，访问你的麦克风。

开发者收集你选中的照片或视频信息，用于提前上传减少上传时间。

为了上传图片或者视频，开发者将在获取你的明示同意后，访问你的摄像头。

为了登录或者注册，开发者将在获取你的明示同意后，收集你的手机号。

开发者收集你的设备信息，用于保障你正常使用网络服务。 开发者收集你的订单信息，用于方便获取订单信息。

开发者收集你的操作日志，用于运营维护。

为了保存图片或者上传图片，开发者将在获取你的明示同意后，使用你的相册（仅写入）权限。

开发者收集你的邮箱，用于在必要时和用户联系。
`;
    return (
      <View className="loginLogin-otherLogin">
        <View className="three-login">
          <View className="login-item">
            <Image className="icon" src={wecatIcon} />
          </View>
        </View>

        {privacy ? (
          <Button className="green-btn bottom-btn" openType="getPhoneNumber" onGetPhoneNumber={this.getPhoneNumber}>
            手机号快捷登录
          </Button>
        ) : (
          <Button
            className="green-btn bottom-btn"
            onClick={() =>
              Taro.showToast({
                title: '请同意隐私协议',
                icon: 'none',
                duration: 2000,
              })
            }
          >
            手机号快捷登录
          </Button>
        )}

        <Text
          className="cancel-login"
          onClick={() => {
            Taro.navigateBack();
          }}
        >
          取消登录
        </Text>

        <Radio
          color="#10ca57"
          style={{textAlign: 'center', marginTop: 5, transform: 'scale(.8)'}}
          checked={privacy}
          onClick={() => this.setState({privacy: !privacy})}
        >
          <Text className="privacy">请阅读并同意</Text>
          <Text className="privacy-x" onClick={() => this.setState({isOpened: true})}>
            《隐私协议》
          </Text>
        </Radio>
        {/* 公司信息 */}
        <View className="componey-info">
          <Text className="text">© 2022-2023 瑞银科技</Text>
        </View>

        <AtActionSheet
          title="《隐私协议》"
          isOpened={isOpened}
          onClose={() => this.setState({isOpened: false})}
          onCancel={() => this.setState({isOpened: false})}
        >
          <AtActionSheetItem>
            <View className="info" dangerouslySetInnerHTML={{__html: info}} />
          </AtActionSheetItem>
        </AtActionSheet>
      </View>
    );
  }

  _login = (): Promise<string> => {
    return new Promise((resolve, reject) => {
      //@ts-ignore
      Taro.login({
        async success(res: {code: any | PromiseLike<string>; errMsg: string}) {
          if (res.code) {
            resolve(res.code);
          } else {
            reject(res.errMsg);
            console.log('登录失败！' + res.errMsg);
          }
        },
      });
    });
  };

  //2.快捷登录 获取用户信息 若绑定过手机号则直接登录
  getPhoneNumber = async (e) => {
    let {
      actions: {action},
    } = this.props;
    // 如果是新用户且要填写邀请码，要结合注册的设置,是邀请注册还是不限
    // 是登录还是注册，取决于该unionId是否绑定过
    await action.commonChange('main.encryptedData', e.detail.encryptedData);
    await action.commonChange('main.iv', e.detail.iv);
    Taro.showLoading();
    setTimeout(() => {
      action._authorizePhoneLogin(e.detail.encryptedData, e.detail.iv);
      Taro.hideLoading();
    }, 300);
  };
}
